<style lang="less">
  @import "./quill.less";
</style>
<template>
  <div class="quill-wrap">
    <quill-editor v-model="quillContent" ref="myQuillEditor" :options="editorOption" @change="onChange">
    </quill-editor>
  </div>
</template>
<script>
  // <Editor ref="myQuillEditor" :content="bannerfrom.content" @quillChange="quillChange"></Editor>
  import "quill/dist/quill.core.css";
  import "quill/dist/quill.snow.css";
  import "quill/dist/quill.bubble.css";
  import { quillEditor, Quill } from "vue-quill-editor";
  import { container, ImageExtend, QuillWatch } from "quill-image-extend-module";
  import util from "@/libs/util.js";
  Quill.register("modules/ImageExtend", ImageExtend);
  export default {
    name: "Editor",
    components: { quillEditor },
    props: {
      content: {
        type: String
      }
    },
    data() {
      return {
        ImgToken: "",
        quillContent: "",
        // 富文本框参数设置
        editorOption: {
          modules: {
            ImageExtend: {
              name: "file",
              size: 1,
              action: util.baseApi.qiniuImgUpLoadUrl,
              response: res => {
                return util.baseApi.qiniuImgDownUrl + res.key;
              },
              headers: xhr => { },
              sizeError: () => { },
              start: () => { },
              end: () => { },
              error: () => {                
                this.$Notice.warning({
                  title: "请重新上传图片"
                });
                util.getqiniuToken("Public").then(() => {
                  this.getImgToken()
                })
              },
              success: () => { },
              change: (xhr, formData) => {
                formData.append("token", this.ImgToken);
              }
            },
            toolbar: {
              container: container,
              handlers: {
                image: function () {
                  QuillWatch.emit(this.quill.id);
                }
              }
            },
          }
        }
      };
    },
    methods: {
      getImgToken() {
        util.judgeqiniuToken("Public").then(() => {
          const Publicqiniu = JSON.parse(localStorage.getItem(`Publicqiniu`));
          this.ImgToken = Publicqiniu.token;
        });
      },
      onChange(txt) {
        let reg = /^<p><br><\/p><p><img/g
        txt.html = txt.html.replace(reg, "<p><img")
        this.quillContent = txt.html
        this.$emit("quillChange", txt.html);
      },
      init() {
        this.quillContent = this.content
      }
    },
    mounted() {
      this.getImgToken();
    },
    watch: {
      content: function (val) {
        this.init()
      }
    }
  };
</script>